<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<link rel="stylesheet" type="text/css" href="css/style.css" />

</h:head>

<ui:composition template="../modelo/template.xhtml">
	<ui:define name="conteudo">

		<!-- end of left content -->

		<h:form id="form">
			<div class="left_content">
				<p:menu>
					<p:submenu label="#{msg.categorias}">
						<p:menuitem value="#{msg.todos}" update="@form" rendered="#{filmeManagedBean.mostraFilmes}"
							action="#{filmeManagedBean.limpaFiltro}" />
						<p:menuitem value="#{msg.acao}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(1)}" />
						<p:menuitem value="#{msg.aventura}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(2)}" />
						<p:menuitem value="#{msg.classico}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(3)}" />
						<p:menuitem value="#{msg.comedia}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(4)}" />
						<p:menuitem value="#{msg.documentario}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(5)}" />
						<p:menuitem value="#{msg.drama}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(6)}" />
						<p:menuitem value="#{msg.faroeste}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(7)}" />
						<p:menuitem value="#{msg.ficcao}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(8)}" />
						<p:menuitem value="#{msg.infantil}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(9)}" />
						<p:menuitem value="#{msg.musical}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(10)}" />
						<p:menuitem value="#{msg.romance}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(11)}" />
						<p:menuitem value="#{msg.suspense}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(12)}" />
						<p:menuitem value="#{msg.terror}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(13)}" />
						<p:menuitem value="#{msg.policial}" update="@form"
							action="#{filmeManagedBean.buscCategoriaId(14)}" />

					</p:submenu>
				</p:menu>
			</div>

			<div class="center_content_index">

				<p:dataGrid
					rendered="#{not filmeManagedBean.mostraFilmes}"
					var="filme" value="#{filmeManagedBean.filmes}"
					paginator="true" columns="4" rows="12"
					rowsPerPageTemplate="9,12,15">

					<p:panel header="#{filme.titulo}" style="text-align:center">
						<h:panelGrid columns="1" style="width:100%">

							<p:graphicImage
								value="../filmes/#{filme.idFilme}.#{filme.extensaoImg}"
								width="90" height="100" />

							<h:outputLabel value="#{filme.diretor}" />
							<h:outputText value="#{filme.anoLancamento}" />
							<h:outputText value="#{filme.categoria.descricao}" />
							<p:commandLink ajax="false">
								<p:graphicImage value="../images/down.png" style="border: 0px;"
									styleClass="margin-5r margin-5l" alt="Download"
									title="Download" />
								<p:fileDownload
									value="#{filmeManagedBean.download(filme.idFilme,filme.titulo)}" />
							</p:commandLink>
							<p:commandLink update=":form:filmeDetail"
								oncomplete="filmeDialog.show()" title="#{msg.visaoDetalhada}">
								<h:outputText styleClass="ui-icon ui-icon-search"
									style="margin:0 auto;" />
								<f:setPropertyActionListener value="#{filme}"
									target="#{filmeManagedBean.filme}" />
							</p:commandLink>
						</h:panelGrid>
					</p:panel>

				</p:dataGrid>



				<p:dataGrid
					rendered="#{filmeManagedBean.mostraFilmes and not empty filmeManagedBean.filmesCategoria }"
					var="filme" value="#{filmeManagedBean.filmesCategoria}"
					paginator="true" columns="3" rows="12"
					rowsPerPageTemplate="9,12,15">

					<p:panel header="#{filme.titulo}" style="text-align:center">
						<h:panelGrid columns="1" style="width:100%">

							<p:graphicImage
								value="../filmes/#{filme.idFilme}.#{filme.extensaoImg}"
								width="90" height="100" />

							<h:outputLabel value="#{filme.diretor}" />
							<h:outputText value="#{filme.anoLancamento}" />
							<h:outputText value="#{filme.categoria.descricao}" />
							<p:commandLink ajax="false">
								<p:graphicImage value="../images/down.png" style="border: 0px;"
									styleClass="margin-5r margin-5l" alt="Download"
									title="Download" />
								<p:fileDownload
									value="#{filmeManagedBean.download(filme.idFilme,filme.titulo)}" />
							</p:commandLink>
							<p:commandLink update=":form:filmeDetail"
								oncomplete="filmeDialog.show()" title="#{msg.visaoDetalhada}">
								<h:outputText styleClass="ui-icon ui-icon-search"
									style="margin:0 auto;" />
								<f:setPropertyActionListener value="#{filme}"
									target="#{filmeManagedBean.filme}" />
							</p:commandLink>
						</h:panelGrid>
					</p:panel>

				</p:dataGrid>
				
							
				<p:dialog header="#{msg.filmeDetalhado}" widgetVar="filmeDialog"
					modal="true">
					<p:outputPanel id="filmeDetail" style="text-align:center;"
						layout="block">

						<p:graphicImage
							value="../filmes/#{filmeManagedBean.filme.idFilme}.#{filmeManagedBean.filme.extensaoImg}"
							width="130" height="140" />


						<h:panelGrid columns="2" cellpadding="5">
							<h:outputLabel for="id" value="#{msg.codigo}: " />
							<h:outputText id="id" value="#{filmeManagedBean.filme.idFilme}" />

							<h:outputLabel for="titulo" value="#{msg.titulo}: " />
							<h:outputText id="titulo"
								value="#{filmeManagedBean.filme.titulo}" />

							<h:outputLabel for="diretor" value="#{msg.diretor}: " />
							<h:outputText id="diretor"
								value="#{filmeManagedBean.filme.diretor}" />

							<h:outputLabel for="categoria" value="#{msg.categoria}: " />
							<h:outputText id="categoria"
								value="#{msg[filmeManagedBean.filme.categoria.descricao]}" />

							<h:outputLabel for="anoLancamento" value="#{msg.anoLancamento}: " />
							<h:outputText id="anoLancamento"
								value="#{filmeManagedBean.filme.anoLancamento}" />

							<h:outputLabel for="idioma" value="#{msg.idioma}: " />
							<h:outputText id="idioma"
								value="#{msg[filmeManagedBean.filme.descricaoIdioma]}" />

							<h:outputLabel for="legenda" value="#{msg.legenda}: " />
							<h:outputText id="legenda"
								value="#{msg[filmeManagedBean.filme.descricaoLegenda]}" />

							<h:outputLabel for="formato" value="#{msg.formato}: " />
							<h:outputText id="formato"
								value="#{filmeManagedBean.filme.descricaoFormato}" />

							<h:outputLabel for="qualidade" value="#{msg.qualidade}: " />
							<h:outputText id="qualidade"
								value="#{filmeManagedBean.filme.descricaoQualidade}" />

							<h:outputLabel for="tempoDuracao" value="#{msg.tempoDuracao}: " />
							<h:outputText id="tempoDuracao"
								value="#{filmeManagedBean.filme.tempoDuracao}" />

							<h:outputLabel for="descricao" value="#{msg.descricao}: " />
							<h:outputText id="descricao"
								value="#{filmeManagedBean.filme.descricao}" />

						</h:panelGrid>
					</p:outputPanel>
				</p:dialog>

			</div>
		</h:form>
		<!-- end of center content -->
	</ui:define>
</ui:composition>

</html>